<template>
  <el-button type="primary" @click="createFolder">创建文件夹</el-button>
  <el-button type="primary" style="position: relative;">
    文件上传
    <input type="file" class="uploadFile"
           style="opacity: 0;width: 100%;position: absolute;top:0;left:0;right: 0;bottom: 0;" multiple
           @change="httpRequestUpload">
  </el-button>
  <!--  <el-upload action="#" :show-file-list="false" style="display: inline-block;margin-left: 10px;"-->
  <!--             :http-request="httpRequestUpload" multiple>-->
  <!--    <input type="file" style="opacity: 0;">-->
  <!--    <el-button type="primary">上传文件</el-button>-->
  <!--  </el-upload>-->
  <el-breadcrumb separator="/" style="margin-top: 20px;">
    <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
    <el-breadcrumb-item><a href="/">promotion management</a></el-breadcrumb-item>
    <el-breadcrumb-item>promotion list</el-breadcrumb-item>
    <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
  </el-breadcrumb>
  <el-row>
    <el-col :span="8" v-for="(item,index) in list" :key="index">
      <div class="productLibrary">
        <el-icon :size="35">
          <Folder/>
        </el-icon>
        <span>{{ item.name }}</span>
      </div>
    </el-col>
  </el-row>
  <el-dialog title="创建文件夹" v-model="show.showFolder" v-if="show.showFolder" draggable>
    <el-form>
      <el-form-item label="名称" prop="projectName">
        <el-input v-model="request.name" placeholder="请输入名称" clearable></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="cancel">关闭</el-button>
      <el-button type="primary" @click="save">保存</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { onBeforeMount, ref, toRefs, watch } from 'vue'
import { folderFileAddUrl, queryFolderFileListUrl } from '@/api/api'
import { post } from '@/utils/httpRequest'
import { emitter, generateId } from '@/utils/util'
import { BEGIN_FILE_UPLOAD, FINISH_FILE_UPLOAD } from '@/utils/eventBusName'

export default {
  name: 'productLibrary',
  setup (props) {
    const { id } = toRefs(props)
    const show = ref({
      showFolder: false
    })
    const folderList = ref([])
    const list = ref([])
    const request = ref({
      name: null,
      type: 1,
      parentId: 0,
      fileId: 0,
      projectId: 0
    })
    const httpRequestUpload = (data) => {
      // 生成唯一id
      const id = generateId()
      console.log(id)
      // 构造文件上传参数
      const payload = {
        file: data.target.files,
        otherParams: {},
        groupId: id
      }
      console.log(payload)
      emitter.emit(BEGIN_FILE_UPLOAD, payload)
      // 根据唯一id接收eventbus回调
      emitter.on(FINISH_FILE_UPLOAD + id, (payload) => {
        console.log(payload)
      })
    }
    const save = async () => {
      const result = await post(folderFileAddUrl, request.value)
      if (result.code === 200) {
        console.log(result)
      }
    }
    const queryFolderFileListAsync = async () => {
      const result = await post(queryFolderFileListUrl, {})
      if (result.code === 200) {
        list.value = result.data
      }
    }
    const setData = () => {
      request.value.parentId = id.value
      request.value.projectId = id.value
      queryFolderFileListAsync()
    }
    watch(() => id.value, () => {
      setData()
    })
    onBeforeMount(() => {
      setData()
    })
    const createFolder = () => {
      show.value.showFolder = true
    }
    return {
      httpRequestUpload,
      folderList,
      list,
      save,
      request,
      show,
      createFolder
    }
  },
  props: {
    // 产品、项目id
    id: {
      type: Number,
      default: 0,
      required: true
    }
  }
}
</script>

<style scoped lang="less">
.productLibrary {
  cursor: pointer;
  margin-top: 20px;
  height: 50px;
  display: flex;
  align-items: center;
}
</style>
